<template>
    <div>
        <ul class="mui-table-view">
			<li v-for="item in list" :key="item.id" class="mui-table-view-cell mui-media">
				 <router-link :to="'/home/newsinfo/'+item.id">  
                                            <!--   : 绑定千万不能少 -->
					<img class="mui-media-object mui-pull-left" :src="item.img_url">
					<div class="mui-media-body">
						<h3>{{item.title}}</h3>
						<p class="mui-ellipsis">
                                           <!-- 调用过滤器 -->
                            <span>发表时间： {{item.add_time | dataFormat}}</span>
                            <span>点击: {{item.click}}次</span>
                        </p>
					</div>
				 </router-link>
			</li>
			

			</ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: []
        }
    },
    created() {
        this.getallnews();
    },
    methods: {
        getallnews() {
            this.$http.get("api/getnewslist").then( result => {
                if(result.body.status === 0) {
                    this.list = result.body.message;
                    console.log(this.list);
                } else {
                    alert("获取失败");
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
 .mui-table-view {
     li {
         h3 {
           font-size: 14px;
         }
         .mui-ellipsis {
             font-size: 12px;
             color: blue;
             display: flex;
             justify-content: space-between;
         }
     }
 }
</style>
